import React, { PureComponent, Fragment } from 'react';
import { Card, Row, Col, Modal, Form, Select, Input, Button } from 'antd';

// 插件
import moment from 'moment';
import AddFrom from './components/PipingRoad/PipingRoadAddForm';
import Table from './components/PipingRoad/PipingRoadTable';
// 组件

// import { getAuthority } from '@/utils/authority';
// import RenderAuthorized from '@/components/Authorized';
import { connect } from 'dva';
// 样式
import styles from './SjsbYlyb.less';
// const Authorized = RenderAuthorized(getAuthority());

//权限控制
import { getAuthority } from '@/utils/authority';
import RenderAuthorized from '@/components/Authorized';
const Authorized = RenderAuthorized(getAuthority());

const currentYear = new Date().getFullYear();
const years = [
  { nodeName: currentYear, key: currentYear },
  { nodeName: currentYear - 1, key: currentYear - 1 },
  { nodeName: currentYear - 2, key: currentYear - 2 },
  { nodeName: currentYear - 3, key: currentYear - 3 },
];
const months = [
  { nodeName: '1月', key: '1' },
  { nodeName: '2月', key: '2' },
  { nodeName: '3月', key: '3' },
  { nodeName: '4月', key: '4' },
  { nodeName: '5月', key: '5' },
  { nodeName: '6月', key: '6' },
  { nodeName: '7月', key: '7' },
  { nodeName: '8月', key: '8' },
  { nodeName: '9月', key: '9' },
  { nodeName: '10月', key: '10' },
  { nodeName: '11月', key: '11' },
  { nodeName: '12月', key: '12' },
];
const { Option } = Select;
@Form.create()
@connect(({ pipingRoad, assessment, loading, global }) => ({
  companyList: assessment.companyList,
  list: pipingRoad.list,
  loading: loading.effects['pipingRoad/fetchList'],
  currentUrl: global.currentUrl,
  elementAuth: global.elementAuth,
  //   sjsbTbSum: maintain.sjsbTb,
  //   loading: loading.effects['maintain/fetchGetQueryModelData'],
}))
export default class PipingRoad extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      //   total: 0,
    };
    this.dispatch = this.props.dispatch;

    this.user_id = sessionStorage.getItem('user_id');

    // this.showAdd = this.showAdd.bind(this);
    // this.handleCancel = this.handleCancel.bind(this);
  }
  queryList = () => {
    const { form } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values)
        this.fetchList(values);
      }
    });
  };

  fetchGetCompany = () => {
    this.dispatch({
      type: 'assessment/fetchGetCompany',
      payload: {
        type: '养护维修',
      },
      callback: response => {
        message.error.error('养护单位获取失败');
        console.log(response);
      },
    });
  };
  fetchList = ({ year = null, roadname = null, department = null,month=null } = {}) => {
    this.dispatch({
      type: 'pipingRoad/fetchList',
      payload: {
        year: year,
        department: department,
        roadname: roadname,
        month:month
      },
      callback: response => {
        message.error.error('获取清单失败');
        console.log(response);
      },
    });
  };
  resetData = () => {
    const { form } = this.props;
    form.resetFields();
    this.fetchList();
  };
  OnRef = ({ ref = null, type = null } = {}) => {
    if (ref && type) this[type] = ref;
  };
  componentDidMount = () => {
    this.fetchList();
    if (!this.props.companyList) this.fetchGetCompany();
  };
  //权限控制
  getAuth = () => {
    const { dispatch, currentUrl } = this.props;
    dispatch({
      type: 'global/fetchAuthorityElements',
      payload: { url: currentUrl },
    });
  };

  render() {
    const { companyList, list, loading } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { elementAuth } = this.props;
    let a = getAuthority();
    return (
      <>
        <Card style={{ margin: '10px' }}>
          <Form layout="inline">
            <Form.Item label="养护单位">
              {getFieldDecorator('department', { initialValue: null })(
                <Select style={{ width: 120 }} style={{ width: '200px' }}>
                  {companyList &&
                    companyList.map(item => (
                      <Option key={item.Id} value={item.Id}>
                        {item.Name}
                      </Option>
                    ))}
                </Select>
              )}
            </Form.Item>
            <Form.Item label="年份">
              {getFieldDecorator('year', { initialValue: null })(
                <Select style={{ width: 120 }} style={{ width: '200px' }}>
                  {years.length > 0
                    ? years.map(item => (
                        <Option key={item.key} value={item.key}>
                          {item.nodeName}
                        </Option>
                      ))
                    : null}
                </Select>
              )}
              </Form.Item>
           <Form.Item label="月份">
              {getFieldDecorator('month', { initialValue: null })(
                <Select style={{ width: 120 }} style={{ width: '200px' }} >
                  {months.length > 0
                    ? months.map(item =>
                      <Option key={item.key} value={item.key}>
                        {item.nodeName}
                      </Option>
                    )
                    : null}
                </Select>
              )}
            </Form.Item>

            <Form.Item label="路名">
              {getFieldDecorator('roadname', { initialValue: null })(
                <Input placeholder="路名" style={{ width: '200px' }} />
              )}
            </Form.Item>
            <Form.Item>
              <Button type="primary" onClick={this.queryList}>
                查询
              </Button>
            </Form.Item>
            <Form.Item>
              <Button onClick={this.resetData}>重置</Button>
            </Form.Item>
            <Authorized authority={elementAuth['btnReport']}>
              <Form.Item>
                <Button
                  type="primary"
                  onClick={() => {
                    this['AddForm'].setState({ visible: true });
                  }}
                >
                  新增
                </Button>
              </Form.Item>
            </Authorized>
          </Form>
        </Card>
        <Card
          title={
            <span style={{ borderLeft: '4px solid #3CB371', paddingLeft: '10px' }}>
              管道一路一表清单
            </span>
          }
          style={{ margin: '10px' }}
        >
          <Table loading={loading} dataSource={list} fetchList={this.fetchList} />
        </Card>
        <AddFrom OnRef={this.OnRef} fetchList={this.fetchList} />
      </>
    );
  }
}
